<template>
    <div id="app">
        <transition  :name="transitionName">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive && isRouterAlive"></router-view>
            </keep-alive>
        </transition>
        <transition  :name="transitionName">
            <router-view v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
        </transition>        
    </div>
</template>

<script>
    export default {
        // name: 'App',
        // mounted(){
        //     document.body.ontouchmove = function (e) {
        //           e.preventDefault();
        //     };
        //     var startX = 0, startY = 0;
        //     //touchstart事件  
        //     function touchSatrtFunc(evt) {
        //         try
        //         {
        //             //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  

        //             var touch = evt.touches[0]; //获取第一个触点  
        //             var x = Number(touch.pageX); //页面触点X坐标  
        //             var y = Number(touch.pageY); //页面触点Y坐标  
        //             //记录触点初始位置  
        //             startX = x;
        //             startY = y;

        //         } catch (e) {
        //             alert('touchSatrtFunc：' + e.message);
        //         }
        //     }
        //     document.addEventListener('touchstart', touchSatrtFunc, false);
        //     var _ss = document.getElementById("app");
        //     _ss.ontouchmove = function (ev) {
        //         var _point = ev.touches[0],
        //                 _top = _ss.scrollTop;
        //         // 什么时候到底部
        //         var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;
        //         // 到达顶端
        //         if (_top === 0) {
        //             // 阻止向下滑动
        //             if (_point.clientY > startY) {
        //                 ev.preventDefault();
        //             } else {
        //                 // 阻止冒泡
        //                 // 正常执行
        //                 ev.stopPropagation();
        //             }
        //         } else if (_top === _bottomFaVal) {
        //             // 到达底部
        //             // 阻止向上滑动
        //             if (_point.clientY < startY) {
        //                 ev.preventDefault();
        //             } else {
        //                 // 阻止冒泡
        //                 // 正常执行
        //                 ev.stopPropagation();
        //             }
        //         } else if (_top > 0 && _top < _bottomFaVal) {
        //             ev.stopPropagation();
        //         } else {
        //             ev.preventDefault();
        //         }
        //     };
        // }
        provide(){
            return{
                reload: this.reload
            }
        },
        data(){
            return{
                transitionName: '',
                isRouterAlive: true,
            }
        },
        watch: {//使用watch 监听$router的变化
            '$route' (to, from) {
                //如果to的索引值为0，不添加任何动画；如果to索引大于from索引,判断为前进状态,反之则为后退状态
                const toDepth = to.path.split('/').length;
                const fromDepth = from.path.split('/').length;
                this.transitionName = toDepth < fromDepth ? 'fold-right' : 'fold-left'

                //当然，如果你没有需要设置索引值为0的页面可以直接用着一段
                /*if( to.meta.index < from.meta.index){
                      this.transitionName = 'fold-right';
                }else{
                      this.transitionName = 'fold-left';
                }*/
            }
        },
        methods: {
            reload(){
                this.isRouterAlive = false;
                this.$nextTick(function(){
                    this.isRouterAlive = true;
                })
            }
        }
    }
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
.fold-right-enter-active,
.fold-right-leave-active,
.fold-left-enter-active,
.fold-left-leave-active {
    will-change: transform;
    transition: all .3s ease-out;
    position: absolute;
    width:100%;
    left:0;
}
.fold-right-enter {
    transform: translateX(-100%);
}
.fold-right-leave-active {
    transform: translateX(100%);
}
.fold-left-enter {
    transform: translateX(100%);
}
.fold-left-leave-active {
    transform: translateX(-100%);
}
</style>
